import { View } from '@ray-js/components';
import clsx from 'clsx';
import React, { useMemo } from 'react';

import MyCustomPickerColor from './component';
import styled from './index.module.less';
import { IProps } from './props';

const MyCustomPicker = (props: IProps) => {
  const {
    value,
    temperature,
    radius,
    eventChannelName,
    style,
    onTouchStart,
    onTouchMove,
    onTouchEnd,
  } = props;

  const _value = value ?? temperature;
  const canvasId = useMemo(() => {
    return `canvasId_${String(+new Date()).slice(-3)}_${String(Math.random()).slice(-3)}`;
  }, []);

  return (
    <View className={clsx(styled.container, styled.flexCenter)} style={style}>
      <MyCustomPickerColor
        canvasId={canvasId}
        value={_value}
        radius={radius}
        eventChannelName={eventChannelName}
        onTouchStart={onTouchStart}
        onTouchMove={onTouchMove}
        onTouchEnd={onTouchEnd}
      />

    </View>
  );
};

const nilFn = () => null;
MyCustomPicker.defaultProps = {
  radius: 140,
  useEventChannel: false,
  eventChannelName: 'lampCirclePickerEventChannel',
  titleStyle: {},
  descStyle: {},
  style: {},
  onTouchStart: nilFn,
  onTouchMove: nilFn,
  onTouchEnd: nilFn,
};

export default MyCustomPicker;
